<!DOCTYPE html>
<html lang="en">
<head>
    <style>

        .item {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin-bottom: 10px;
            background-color: green;
        }
    </style>
    <meta charset="UTF-8">
    <title>循环中生成事件</title>
</head>
<body>
<div id="box">

</div>

<a href="item.html?item_id=1" >
    <div class="item">
        <div><img src="" alt/></div>
        <div >商品1</div>
    </div>

</a>

</body>
<script src="../../../plugin/jquery/jquery.js"></script>
<script>

    $(document).ready(function () {

        initList();
    })

    function initList() {


        $.ajax({
            url:'../../../mock/list.json',
            method:'get',
            dataType:'json',
            success:function (data) {

                $.each(data,function (index,item) {

                   // simple

                   /*  var item = $('<div></div>').text(item.name).addClass('item').attr("id","item_"+item.id);

                     item.bind('click',function () {
                         alert(this.id);
                     })*/


                   /*complex*/

                    var link = $('<a></a>').attr('href',"item.html?item_id="+item.id);
                    var innerItem = $('<div></div>').addClass('item');
                    var imgBox = $('<div></div>');
                    var img1 = $('<img />').attr('src','1.jpg');
                    var nameBox = $('<div></div>').text(item.name);

                    link.append(innerItem);
                    innerItem.append(imgBox).append(nameBox);
                    imgBox.append(img1);

                    $('#box').append(link);

                })
            }
        })
    }


</script>

</html>